import Util from "./Util";

const Gsvg = {
  getCircleRate: (width, height, rate) => {
    var {x, y, isOverHalf} = Util.caculatePath(rate, 29);
    var translateX = rate == 100 ? 10.81 : (rate < 10 ? 20.81 : 15.81);
    return ` <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 64 64"><g><g>
          <path fill="#FF3637" d="M32,6A26,26,0,1,1,6,32,26,26,0,0,1,32,6m0-6A32,32,0,1,0,64,32,32,32,0,0,0,32,0Z"/>
          <path stroke-width="6"  fill="none" stroke="#20d802" d="M 32 32 m 0 -29 a 29 29 0 ${isOverHalf} 1 ${x} ${y} "/>
          <text fill="#17a700" font-size="16px" font-family="MicrosoftYaHei, Microsoft YaHei" transform="translate(${translateX} 36.82)">${Math.round(rate)}%</text>
          </g></g></svg>`;
  },
  getRedPoint: (width, height) => {
    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 64 64"> <g><g>
                      <circle opacity="0.7" fill="red" cx="32" cy="32" r="6">
                          <animate attributeName="r" from="6" to="32" begin="0s" dur="2s" repeatCount="indefinite" />
                          <animate attributeName="opacity" from="0.7" to="0" begin="0s" dur="2s" repeatCount="indefinite" />
                      </circle>
                        <circle fill="red" opacity="0.7" cx="32" cy="32" r="6">
                          <animate attributeName="r" from="6" to="32" begin="1s" dur="2s" repeatCount="indefinite" />
                          <animate attributeName="opacity" from="0.7" to="0" begin="1s" dur="2s" repeatCount="indefinite" />
                      </circle>
                      <circle fill="red" cx="32" cy="32" r="6"/>
                    </g></g></svg>`;
  },
  getCommunity_live: (width, height, rate) => {
    var {x, y, isOverHalf} = Util.caculatePath(rate, 16);
    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 36 36">
      <defs><style>.unit-tips-cls-1{opacity:0.2;}.unit-tips-cls-2{fill:#59d15b;}.unit-tips-cls-3{fill:#00b55a;}.unit-tips-cls-4{fill:#fff;}.unit-tips-cls-5{fill:#FF3637;}.unit-tips-cls-6{fill:#20d802;}</style></defs>
      <g id="图层_1-2" data-name="图层 1">
        <g class="unit-tips-cls-1"><circle class="unit-tips-cls-2" cx="18" cy="18" r="18"/></g>
        <circle class="unit-tips-cls-3" cx="18" cy="18" r="12"/>
        <path class="unit-tips-cls-4" d="M24.2,22.5h-.7V15a.32.32,0,0,0-.3-.3H18.7a.32.32,0,0,0-.3.3v7.5h-1v-10a.32.32,0,0,0-.3-.3H12.6a.32.32,0,0,0-.3.3v10h-.7c-.1,0-.2,0-.2.1a.31.31,0,0,0-.1.2v.7a.32.32,0,0,0,.3.3H24.2a.32.32,0,0,0,.3-.3v-.7c0-.1,0-.2-.1-.2s-.1-.1-.2-.1Zm-4.7-6a.32.32,0,0,1,.3-.3h2.4a.32.32,0,0,1,.3.3v.4a.32.32,0,0,1-.3.3H19.8a.32.32,0,0,1-.3-.3Zm0,2.1a.32.32,0,0,1,.3-.3h2.4a.32.32,0,0,1,.3.3V19a.32.32,0,0,1-.3.3H19.8a.32.32,0,0,1-.3-.3ZM13.4,14a.32.32,0,0,1,.3-.3h2.4a.32.32,0,0,1,.3.3v.4a.32.32,0,0,1-.3.3H13.7a.32.32,0,0,1-.3-.3Zm0,2.1a.32.32,0,0,1,.3-.3h2.4a.32.32,0,0,1,.3.3v.4a.32.32,0,0,1-.3.3H13.7a.32.32,0,0,1-.3-.3Zm0,2a.32.32,0,0,1,.3-.3h2.4a.32.32,0,0,1,.3.3v.4a.32.32,0,0,1-.3.3H13.7a.32.32,0,0,1-.3-.3Z"/>
        <g id="深蓝圈"><path stroke-width="3"  fill="none" stroke="#FF3637" d="M 18 18 m 0 -16 a 16 16 0 1 1 -0.000001 0"/></g>
        <g id="绿色圈"><path stroke-width="3"  fill="none" stroke="#20d802" d="M 18 18 m 0 -16 a 16 16 0 ${isOverHalf} 1 ${x} ${y}"/></g>
      </g>
    </svg>`;
  },
  getCommunity_business: (width, height, rate) => {
    var {x, y, isOverHalf} = Util.caculatePath(rate, 16);
    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 36 36">
      <g><g>
          <g opacity="0.2"><circle fill="#cea600" cx="18" cy="18" r="18"/></g>
          <circle fill="#c9ac00" cx="18" cy="18" r="12"/>
          <path fill="#fff" d="M23.6,13.7h-11s-1.6,2.6-1.3,3.6c1.5,3.1,3.4.1,3.4.1,1.8,2.8,3.4,0,3.4,0,1.9,2.9,3.4,0,3.4,0,1.8,2.5,3.2.5,3.2,0C25.3,16.3,23.6,13.7,23.6,13.7Z"/>
          <path fill="#fff" d="M23.2,19.4h-.6a.43.43,0,0,0-.4.4h0v2.5H14V19.8a.43.43,0,0,0-.4-.4H13a.43.43,0,0,0-.4.4v3.8a.68.68,0,0,0,.7.7h9.5a.68.68,0,0,0,.7-.7V19.8C23.5,19.6,23.4,19.4,23.2,19.4Z"/>
          <path fill="#fff" d="M12.9,13H23.2a.43.43,0,0,0,.4-.4h0V12a.43.43,0,0,0-.4-.4H12.9a.43.43,0,0,0-.4.4v.6A.37.37,0,0,0,12.9,13Z"/>
          <g id="深蓝圈"><path fill="#0b3767" d="M18,3A15,15,0,1,1,3,18,15,15,0,0,1,18,3m0-3A18,18,0,1,0,36,18,18,18,0,0,0,18,0Z"/></g>
          <g id="绿色圈"><path stroke-width="3"  fill="none" stroke="#20d802" d="M 18 18 m 0 -16 a 16 16 0 ${isOverHalf} 1 ${x} ${y}"/></g>
      </g></g></svg>`;
  },
  getCommunity_office: (width, height, rate) => {
    var {x, y, isOverHalf} = Util.caculatePath(rate, 16);
    return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 36 36">
      <g><g>
          <g opacity="0.2"><circle fill="#33a8ff" cx="18" cy="18" r="18"/></g>
          <circle fill="#009cf2" cx="18" cy="18" r="12"/>
          <path fill="#fff" d="M12,24.3h.3V17.1l.3-.1,3.2-1.1v-2l.2-.1,5.3-2.5.6-.3,1.6,1.1v12h.6v.8H20.9V12.3l-4.5,2.1v1.1l1.3-.4.5-.2h.1l1.6,1v8.2h.6v.8H17.3v-9l-4.5,1.5v7.7H11.7v-.8Zm1.6.7h3.3V23.5c-.6,0-1.2.1-1.7.1s-1,.1-1.5.1V25Zm0-5.6c.5-.1,1-.3,1.5-.4s1.1-.3,1.7-.5V17c-.6.2-1.2.4-1.7.6a8.8,8.8,0,0,1-1.5.5Zm0,1.8,1.5-.3,1.7-.3V19.1a13.64,13.64,0,0,1-1.7.4c-.5.1-1,.3-1.5.4Zm0,1.9c.5,0,1-.1,1.5-.1s1.1-.1,1.7-.2V21.3l-1.7.3a7.72,7.72,0,0,1-1.5.2Z"/>
          <g id="深蓝圈"><path fill="#0b3767" d="M18,3A15,15,0,1,1,3,18,15,15,0,0,1,18,3m0-3A18,18,0,1,0,36,18,18,18,0,0,0,18,0Z"/></g>
          <g id="绿色圈"><path stroke-width="3" fill="none" stroke="#20d802" d="M 18 18 m 0 -16 a 16 16 0 ${isOverHalf} 1 ${x} ${y}"/></g>
      </g></g></svg>`;
  },
  getCommunity_industry: (width, height, rate) => {
    var {x, y, isOverHalf} = Util.caculatePath(rate, 16);
    return `
    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 36 36">
      <g><g>
          <g opacity="0.2"><circle fill="#5c70ff" cx="18" cy="18" r="18"/></g>
          <circle fill="#4d4dff" cx="18" cy="18" r="12"/>
          <path fill="#fff" d="M11.85,24.15v-4.5h12.3v4.5Zm2.5-3.7h-1.2v2h1.2Zm2.4,0h-1.2v2h1.2Zm2.4,0H18v2h1.2Zm-7.3-3.3h.6l3.6-1.6.4,1.6h.8l3.4-1.6.4,1.6H24v2H11.85Zm6.6-5.3h2v3.3l-2,1Zm-4.6,0h2v3.3l-2,.9Z"/>
          <g id="深蓝圈"><path fill="#0b3767" d="M18,3A15,15,0,1,1,3,18,15,15,0,0,1,18,3m0-3A18,18,0,1,0,36,18,18,18,0,0,0,18,0Z"/></g>
          <g id="绿色圈"><path stroke-width="3" fill="none" stroke="#20d802" d="M 18 18 m 0 -16 a 16 16 0 ${isOverHalf} 1 ${x} ${y}"/></g>
      </g></g></svg>`;
  },
  getUnit: (width, height) => {
    return `
    <svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px" viewBox="0 0 32 32">
      <g>
        <g>
          <path fill="#FF3637" d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-4A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z"/>
          <path fill="#00D9D1" d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-4A16,16,0,1,0,32,16,16,16,0,0,0,16,0Z"/>
          <path fill="#80E0FF"
                d="M22.83,15.17a.94.94,0,0,1-.83.33H21v5c0,.76-.32,1-1.1,1H18v-4a1.22,1.22,0,0,0-1-1H15c-1,0-1,.52-1,1v4H12c-.75,0-1-.12-1-1l-.05-5H10a.91.91,0,0,1-.84-.4c-.26-.3-.25-.67.42-1.18l5.83-5.06c.17-.12.35-.36.57-.36h.09c.22,0,.39.19.56.31l5.78,5.11c.56.34.77.91.42,1.25Z"/>
        </g>
      </g>
    </svg>`;
  },
}
export default Gsvg;
